<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20" v-show="state==1">
		  <div slot="header" class="clearfix">
		  	<img src="../../../../static/img/header/tuxiang.png" alt="" class="cardbg"/>
		    <span>图片检测</span>
		  </div>
		  <div>
		  	<div class="cardContentTop">
		  		 <el-form ref="form" :model="form" label-width="88px">
					   <el-form-item label="检测关键词:">
						    <el-select v-model="value5" multiple placeholder="请选择关键词"  @change = "selectChange()">
							    <el-option
							      v-for="(item,index) in selectlist"
							      :key="index"
							      :label="item.wordName"
							      :value="index">
							    </el-option>
							  </el-select>
						  </el-form-item>
					  <el-form-item label="检测图片:">
					    <!--<div class="floatl relative">
									<el-button size="small" type="primary">点击上传</el-button>
									<input @change="unplodImg" type="file" id="upload"  accept="image/jpeg,image/x-png,image/gif" class="upload"/>
					    </div>-->
					     <el-upload
							  class="upload-demo"
							  action="http://47.106.160.27:8080/lingbian-api/api/generate/fileuploads"
							  :headers="myHeaders"
							  :on-success="uploadSuccess"
							  :limit= 10
							  :on-exceed="overflow"
							  :on-progress="imgLoading"
							  multiple>
							  <el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
					   	<span class="jv">*单次最多检测10张图片</span>
					  </el-form-item>
					  <div class="clearFix">
					  	<div class="imgWrapper" v-for="(item,index) in imgArr">
					  		<img :src="'http://47.106.160.27/sysfile/'+item" alt=""  width="100%" height="100%" alt="待检测图片"/>
					  		<i class="el-icon-close delimg" @click="delImg(index)"></i>
					  	</div>
					  </div>
					  
					  <div class="mt50 pt50 mb30 pb40 clearFix">
							<div class="floatl">
									<el-button type="primary" size="small" @click="checkImg()">计算价格</el-button>
							</div>
					  </div>
					</el-form>
		  	</div>
		  </div>
		</el-card>
		 <el-card class="box-card mt20" id="pdfDom" v-loading="loading"  v-show="state==2">
		  <div slot="header" class="clearfix">
		    <span v-text="'任务名称:' + taskName"></span>
		    <span class="cursor lan"  @click="editName()">编辑</span>
		  </div>
		  <div>
		  	<div class="sysIconWrapper wpx1200 clearFix">
					<ul>
						<li class="tupian">
							<p class="title">图片总数</p>
							<p class="num" v-text="imgArr.length"></p>
						</li>
						<li class="guanjian">
							<p class="title">
								<span>扫描关键词</span>
								<!--<span class="lan cursor" @click="dialogVisible = true">修改</span>-->
							</p>
							<p class="num" v-text="imgKeyWordNum"></p>
						</li>
						<!--<li class="yitupian">
							<p class="title">已扫描图片</p>
							<p class="num"  v-text="result.length"></p>
						</li>-->
						<li class="feiyong">
							<p class="title">费用总计</p>
							<p class="num" v-text="money + '元'"></p>
						</li>
					</ul>
				</div>
				<div class="textarea ml30 overflowY" id="result" v-show="false"></div>
				<div class="sysIconWrapper mt50 pt50">
					计费说明：检测一张图片0.025元/张
				</div>
				<div class="sysIconWrapper">
					<div class="mt50 mb30 pb40 clearFix">
							<div class="floatl mr25">
								<!--<router-link to="/imgCheck">-->
									<el-button type="primary" size="small" @click="getResult()">立即支付</el-button>
								<!--</router-link>-->
							</div>
							<div class="floatl">
								<!--<router-link to="/imgCheck">-->
									<span @click="state=1">
										<el-button  size="small">重新选择扫描范围</el-button>
									</span>
									 
								<!--</router-link>-->
							</div>
					  </div>
				</div>
		  </div>
		</el-card>
		
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  :lock-scroll=false
		  width="400px">
		  <div class="pt40 pl40">
		  	<el-form ref="form" :model="form" label-width="88px">
					<el-form-item label="检测关键词:">
				    <el-select v-model="value5" multiple placeholder="请选择关键词"  @change = "selectChange()">
					    <el-option
					      v-for="(item,index) in selectlist"
					      :key="index"
					      :label="item.wordName"
					      :value="index">
					    </el-option>
					  </el-select>
				  </el-form-item>
				</el-form>
		  </div>
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
  </div>
</template>

<script>
import API from "@/api"
import lrz from 'lrz'
import myselect from "@/components/parts/select/select"
export default {
  name: 'imgCheck',
  components : {
    myselect
  },
  data () {
    return {
    	fileList: [],
    	form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
       },
       list:[],
       wordIndex:'',
       imgurl:'',
       imgArr:[],
       loading: false,
       imgResult: '',
       imgKeyWordNum:'',
       taskName: "",
       state:1,
       htmlTitle: '文图灵辨图片检测结果',
     	 myHeaders: {},
     	 money:"",
     	 dialogVisible: false,
     	 selectlist:[],
     	 value5: [],
    }
  },
  mounted: function () {
  	setMinHeight("contentWrapper")
  		$(window).resize(function() {
		  setMinHeight("contentWrapper")
		});
		this.myHeaders = {token: API.header.getCookie("token")};
		this.getList()
  },
  methods: {
  	selectChange(){
	  	var indexArr = this.value5;
	  	var selectArr = [];
	  	for(var i=0;i<indexArr.length;i++){
	  		selectArr.push(this.selectlist[indexArr[i]])
	  	}
	  	var newArr = {"wordTxt":"","wordName":"","wordId":""};
	  	for(var i=0;i<selectArr.length;i++){
	  		newArr.wordName += selectArr[i].wordName + " ";
	  		newArr.wordId += selectArr[i].wordId + " ";
	  		if(selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " || selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " ){
	  			newArr.wordTxt += selectArr[i].wordTxt.substr(0,selectArr[i].wordTxt.length-1) + " ";
	  		}else{
	  			newArr.wordTxt += selectArr[i].wordTxt + " ";
	  		}
	  	}
	  	newArr.wordTxt = newArr.wordTxt.substr(0,newArr.wordTxt.length-1);
	  	newArr.wordName = newArr.wordName.substr(0,newArr.wordName.length-1);
	  	newArr.wordId = newArr.wordId.substr(0,newArr.wordId.length-1);
	  	this.selectevent(newArr);
//	  	console.info(newArr)
	  },
  	getList(){
	  	API.setting.getList(API.header.getCookie("token")).then(({data}) => {
	       if(data.code=='0'){
						this.selectlist = data.data;
	       }else{
						this.$message.error(data.msg);
	       }
      })
	  },
  	editName(id){
// 		console.error(id)
   		this.$prompt('请输入新任务名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          lockScroll: false
        }).then(({ value }) => {
        	this.taskName = value;
        }).catch(() => {});
   	},
  	getMoney(){
     	API.check.jisuan(this.imgArr.length).then(({data}) => {
		       if(data.code=='0'){
							this.money = data.data
		       }else{
							this.money = "计算错误"
		       }
	      })
  	},
  	imgLoading(){
  		this.loading = true;
  	},
   	overflow(){
   		this.$message.error('最多上传十张，请重新选择');
   	},
   	uploadSuccess(response, file, fileList){
  		this.loading = false;
   		if(file.response.code=="0"){
   			this.imgArr.push(file.response.filepath[0])
   		}
   	},
   	selectevent(data){
   		this.list = data;
   	},
	  unplodImg(e){
						var that = this;
						var fileObj = e.target.files[0];
						lrz(fileObj).then(function (rst) {
			            // 处理成功会执行
			            	$.ajax({
			            		  headers: {
									        token: API.header.getCookie("token")
									      },
										    url: process.env.API_ROOT + 'generate/fileupload',
										    type: 'POST',
										    cache: false,
										    data: rst.formData,
										    processData: false,
										    contentType: false,
										    success:function(data){	
										    	that.imgArr.push(data.filepath)
										    }
										})
			        })
    },
    checkImg(){
    	if(!this.list.wordTxt){
					this.$message.error('请先选择关键字');
	  			return
	  	}
    	if(this.imgArr.length == 0){
    		this.$message.error('请先上传图片');
	  			return
    	}
//  	console.error(this.list)
    	var listInfo = this.list;
    	sessionStorage.setItem("imgArr",JSON.stringify(this.imgArr))
    	var checkInfo = {
													info: {
														"img":this.imgArr,
														"content":'',
														"wordList":listInfo.wordTxt,
														"wordId":listInfo.wordId,
														"taskName": this.taskName
													},
													token: API.header.getCookie("token"),
													url: "checkImg"
												}
    	this.imgWordList  = checkInfo.info.wordList;
   		this.imgKeyWordNum = API.check.getKeyWordNum(this.list.wordTxt)
   		this.taskName =  getNowFormatDate();
   		this.state = 2;
   		this.getMoney();
   		return;
    	
			
    },
    getResult(){
    	var listInfo = this.list;
    	var checkInfo = {
													info: {
														"img":this.imgArr,
														"content":'',
														"wordList":listInfo.wordTxt,
														"wordId":listInfo.wordId,
														taskName: this.taskName
													},
													token: API.header.getCookie("token"),
													url: "checkImg"
												}
    	this.loading = true;
    	API.check.check(checkInfo).then(({data}) => {
				this.loading = false;
		       if(data.code=='0'){
		       		sessionStorage.setItem("imgResult",JSON.stringify(data.data))
		       		sessionStorage.setItem("imgTaskName",data.taskName)
		       		sessionStorage.setItem("imgWordList",checkInfo.info.wordList)
		       		sessionStorage.setItem("imgKeyWordNum",API.check.getKeyWordNum(this.list.wordTxt))
		       		sessionStorage.setItem("value5",JSON.stringify(this.value5))
    					sessionStorage.setItem("selectlist",JSON.stringify(this.selectlist))
					  	this.$router.push({
					      name: 'imgResult',
					   })
		       }else{
						this.$message.error(data.msg);
		       }
	      })
    },
	 	delImg(index) {
	 		this.imgArr.splice(index, 1)
	 		console.info(this.imgArr)
	 	},
	 	Fixed(val){
			var val = val + "";
			var val1 = "";
			var val2 = ""
			if(val && val.indexOf(".")!=-1){
				var result = val.split(".");
				if(result[1].length>3){
					val2 = result[1].substring(0,3)
				}
				val1 = result[0] + "." + val2;
				return val1;
			}else{
				return val;
			}
			
		}
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#app {
		/*text-align: left;*/
	}
	.cardContentTop {
		width: 800px;
    margin: 0 auto;
	}
	.imgWrapper {
    position: relative;
    width: 100px;
    height: 90px;
    float: left;
    margin: 15px;
	}
	.delimg {
		position: absolute;
    right: -19px;
    top: -13px;
    z-index: 999;
    font-size: 20px;
    cursor: pointer;
	}
	.upload {
		position: absolute;
    left: 0;
    top: 5px;
    opacity: 0;
    height: 32px;
    width: 100px;
	}
</style>
